<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :label-col="labelCol" :wrapper-col="wrapperCol">
        
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="订单号" prop="orderNo">
              <a-input v-model="model.orderNo" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="customerName">
              <a-input v-model="model.customerName" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="门窗系列" prop="windowSeries">
              <a-input v-model="model.windowSeries" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="门窗窗号" prop="windowNo">
              <a-input v-model="model.windowNo" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="门窗颜色" prop="windowColor">
              <a-input v-model="model.windowColor" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="仓库" prop="warehouseName">
              <a-input v-model="model.warehouseName" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="库位" prop="locationName">
              <a-input v-model="model.locationName" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="批次号" prop="batchNo">
              <a-input v-model="model.batchNo" :readOnly="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="库存状态" prop="stockStatus">
              <j-dict-select-tag v-model="model.stockStatus" dictCode="finished_goods_stock_status" :disabled="true"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="可用数量" prop="availableQuantity">
              <a-input-number v-model="model.availableQuantity" :readOnly="true" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="预留数量" prop="reservedQuantity">
              <a-input-number v-model="model.reservedQuantity" :readOnly="true" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="总数量" prop="totalQuantity">
              <a-input-number v-model="model.totalQuantity" :readOnly="true" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="单价" prop="unitPrice">
              <a-input-number v-model="model.unitPrice" :readOnly="true" style="width: 100%" :precision="2"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="总金额" prop="totalAmount">
              <a-input-number v-model="model.totalAmount" :readOnly="true" style="width: 100%" :precision="2"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="入库日期" prop="inboundDate">
              <a-date-picker v-model="model.inboundDate" :disabled="true" style="width: 100%" format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="备注" prop="remark">
              <a-textarea v-model="model.remark" :readOnly="true" :rows="3"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 库存变动记录 -->
        <a-divider>最近变动记录</a-divider>
        <a-table
          :columns="logColumns"
          :dataSource="inventoryLogs"
          :pagination="false"
          size="small"
          :scroll="{y: 200}">
          
          <template slot="operationType" slot-scope="text">
            <a-tag v-if="text == 1" color="green">入库</a-tag>
            <a-tag v-else-if="text == 2" color="red">出库</a-tag>
            <a-tag v-else-if="text == 3" color="blue">调整</a-tag>
            <a-tag v-else-if="text == 4" color="orange">预留</a-tag>
            <a-tag v-else-if="text == 5" color="purple">释放</a-tag>
          </template>
        </a-table>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'InventoryDetailModal',
  components: {},
  data() {
    return {
      title: "库存详情",
      width: 800,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
      confirmLoading: false,
      inventoryLogs: [],
      logColumns: [
        {
          title: '操作类型',
          dataIndex: 'operationType',
          width: 80,
          scopedSlots: { customRender: 'operationType' }
        },
        {
          title: '操作数量',
          dataIndex: 'operationQuantity',
          width: 80,
        },
        {
          title: '操作前',
          dataIndex: 'beforeQuantity',
          width: 70,
        },
        {
          title: '操作后',
          dataIndex: 'afterQuantity',
          width: 70,
        },
        {
          title: '操作原因',
          dataIndex: 'operationReason',
          width: 120,
        },
        {
          title: '操作员',
          dataIndex: 'operatorName',
          width: 80,
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          width: 130,
        }
      ]
    }
  },
  created() {},
  methods: {
    show(record) {
      this.visible = true;
      this.model = Object.assign({}, record);
      this.loadInventoryLogs(record.id);
    },
    async loadInventoryLogs(inventoryId) {
      try {
        const res = await getAction(`/wms/finished-goods/inventory/logs/${inventoryId}`);
        if (res.success) {
          this.inventoryLogs = res.result.slice(0, 10); // 只显示最近10条记录
        }
      } catch (error) {
        console.error('加载库存变动记录失败', error);
      }
    },
    handleOk() {
      this.handleCancel();
    },
    handleCancel() {
      this.close();
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.model = {};
      this.inventoryLogs = [];
    }
  }
}
</script>
